{% extends 'customer_dashboard.html' %}

{% block content %}
<div class="card">
  <h2><i class="bi bi-card-list"></i> 交易记录</h2>
  <p>以下是您账户中所有银行卡的交易历史：</p>

  {% if transactions %}
    <div class="card-container">
      {% for tx in transactions %}
      <div class="card-item" style="background-color: #fdfdfd; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 15px; margin-bottom: 15px;">
        <p><i class="bi bi-credit-card-2-back"></i> <strong>卡号：</strong>{{ tx['cardID'] }}</p>
        <p><i class="bi bi-clock"></i> <strong>交易时间：</strong>{{ tx['tradeDate'] }}</p>
        <p><i class="bi bi-shuffle"></i> <strong>交易类型：</strong>{{ tx['tradeType'] }}</p>
        <p><i class="bi bi-cash"></i> <strong>交易金额：</strong>{{ "%.2f"|format(tx['tradeMoney']) }} 元</p>
        <p><i class="bi bi-info-circle"></i> <strong>备注：</strong>{{ tx['remark'] or '无' }}</p>

      </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="card-item" style="background-color: #f8f9fa; border-radius: 10px; border-left: 5px solid #ccc; padding: 20px; text-align: center; color: #777;">
      <i class="bi bi-info-circle" style="font-size: 24px;"></i>
      <p style="margin-top: 10px;">暂无交易记录</p>
    </div>
  {% endif %}
</div>
{% endblock %}
